<script setup>
import { ref } from 'vue'

import SiteNotice from '../components/SiteNotice.vue'
import jsonToMap from '../j2m.js'
import { getText } from '../store/txtstore.js'

import gundata from '../data/GunData.json'
import chardata from '../data/GunCharacterData.json'

const gunData = jsonToMap(gundata.data)
const charData = jsonToMap(chardata.data)

const classes = ['', '防卫', '尖兵', '支援', '火力']
const weapons = ['', '手枪', '冲锋枪', '步枪', '突击步枪', '机枪', '霰弹枪', '刀']

const chars = ref([])
for (const k of charData.keys()) {
  if (k > 99) {
    break
  }
  const c = charData.get(k)
  chars.value.push(c)
}
chars.value.sort((a, b) => a[19] - b[19])

const rankFilter = ref([false, false])
const classFilter = ref([false, false, false, false, false])
const typeFilter = ref([false, false, false, false, false, false, false, false])
function filter(gunId) {
  const gun = gunData.get(gunId)
  const rankMatch = rankFilter.value[gun[15]-4] || !(rankFilter.value[0] || rankFilter.value[1])
  const classMatch = classFilter.value[gun[13]] || classFilter.value.every(c => !c)
  const typeMatch = typeFilter.value[gun[24]] || typeFilter.value.every(t => !t)
  return rankMatch && classMatch && typeMatch
}

function selectAll() {
  for (let i = 8; --i;) {
    typeFilter.value[i] = false
  }
}
</script>

<template>
  <SiteNotice />
  <article>
    <h1>成员库</h1>
    <form>
      <fieldset>
        <legend>稀有度</legend>
        <label class="rank-4"><input type="checkbox" v-model="rankFilter[0]">标准</label>
        <label class="rank-5"><input type="checkbox" v-model="rankFilter[1]">精英</label>
      </fieldset>
      <fieldset>
        <legend>职业</legend>
        <label v-for="(cls, num) in classes" v-show="num">
          <input type="checkbox" v-model="classFilter[num]">{{ cls }}
        </label>
      </fieldset>
      <fieldset>
        <legend>武器种类</legend>
        <button @click="selectAll">全选</button>&nbsp;
        <label v-for="(type, num) in weapons" v-show="num">
          <input type="checkbox" v-model="typeFilter[num]">{{ type }}
        </label>
      </fieldset>
    </form>
    <table>
      <thead>
        <tr>
          <!--<th>角色编号</th>-->
          <th colspan="2">成员</th>
          <!--<th>人形编号</th>-->
          <th>职业</th>
          <th>武器<br>烙印编号</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="char of chars" v-show="!char[25] || filter(char[9])">
          <td><img :src="`/exilium/icons/avatar/Avatar_Head_${char[4]}.png`" :class="'rank-' + gunData.get(char[9])?.[15] || 5"></td>
          <td v-if="char[25]">
            <RouterLink :to="`/gun/${char[9]}`">{{ getText(char[2][1]) }}</RouterLink>
          </td>
          <td v-else>
            <RouterLink to="/mayling">美玲</RouterLink>
          </td>
          <!--<td>{{ char[9] }}</td>-->
          <td>{{ classes[gunData.get(char[9])?.[13]] }}</td>
          <td>{{ weapons[gunData.get(char[9])?.[24]] }}<br>{{ getText(char[16][1]) }}</td>
        </tr>
      </tbody>
    </table>
  </article>
</template>

<style scoped>
nav {
  position: absolute;
}

#app>p {
  grid-area: b;
}

article {
  grid-area: c;
}

label {
  margin-right: 0.5em;
}

input {
  margin-right: 2px;
}

table {
  border-spacing: 1em 0;
  text-align: center;
}

td:nth-child(2) {
  text-align: left;
}

img {
  width: 64px;
}

img.rank-4 {
  background-color: #7967ba;
}
img.rank-5 {
  background-color: #df9e00;
}

@media (prefers-color-scheme: dark) {
  td:nth-child(1):hover {
    background-color: rgba(255 255 255/0.15);
  }
}</style>
